<template>
  <div>
    <el-table :data="list" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row>
      <!--<el-table-column type="selection" width="55">
            </el-table-column>-->
      <el-table-column align="center" label='售后编号' min-width="155px">
        <template slot-scope="scope">
          {{scope.row.returnCode}}
        </template>
      </el-table-column>
      <el-table-column label="售后类型" align="center">
        <template slot-scope="scope">
          {{scope.row.returnType | returnType}}
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.returnStauts | returnStauts}}</span>
        </template>
      </el-table-column>
      <el-table-column label="售后金额（元）" align="center">
        <template slot-scope="scope">
          {{scope.row.returnPrice | numFilter}}
        </template>
      </el-table-column>
      <el-table-column label="收货人手机号" align="center" min-width="110px">
        <template slot-scope="scope">
          {{scope.row.orderPhone}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="申请时间" align="center" min-width="155px">
        <template slot-scope="scope" v-if="scope.row.createDate!=null">
          <i class="el-icon-time"></i> {{scope.row.createDate | formatDate('yyyy-MM-dd hh:mm')}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="{ path: 'customerDetail', query: { returnId: scope.row.id }}">
            <el-button type="text" size="small">查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {
  getOrderReturnList
} from '@/api/list'
export default {
  name: 'tabCustomer',
  // props: {
  //   orderStatus: {},
  //   orderCode: {}
  // },
  props: ['returnStatus', 'returnList'],
  data() {
    return {
      total: 100,
      listQuery: this.returnList,
      list: null,
      listLoading: true
    }
  },
  created() {
    this.getReturn()
  },
  filters: {
    numFilter(value) {
      const realVal = Number(value)
      return realVal.toFixed(2)
    },
    returnStauts(val) {
      return val === 1 ? '待审核' : val === 2 ? '等待寄回' : val === 3 ? '已寄回' : val === 4 ? '已确认' : val === 5 ? '已拒绝' : val === 6 ? '已撤销' : val === 7 ? '待退款' : val === 8 ? '已退款' : '未知'
    },
    returnType(val) {
      return val === 1 ? '退款' : val === 2 ? '退款退货' : val === 3 ? '退运费' : '未知'
    }
  },
  // watch: {
  //   frontPoints(newValue, oldValue) {
  //     console.log(newValue)
  //   }
  // },
  methods: {
    getReturn() {
      this.listQuery.returnStatus = this.returnStatus
      this.listLoading = true
      this.$emit('create') // for test
      getOrderReturnList(this.listQuery).then(response => {
        this.list = response.data.orderReturnList
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.getReturn()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageIndex = val
      this.getReturn()
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss">
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
